<template>
  <div class="navbar">
    <div class="nav-left">
      <img src="@/assets/img/logo.png" alt="logo" class="logo" @click="reloard('tr')">
      <el-dropdown placement="bottom" @command="handleCommand" @visible-change="dropDownChange">
        <span class="el-dropdown-link">微瓴视图 <i class="el-icon--right" :class="dropDownArrow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i></span>
        <el-dropdown-menu slot="dropdown" class="sysDropdown noTriangle">
          <!-- <el-dropdown-item command="http://www.baidu.com">微瓴视图</el-dropdown-item> -->
          <el-dropdown-item command="cc"><a href="https://iems.webuilding.net.cn" style="color:white;text-decoration:none">微瓴能源</a></el-dropdown-item>
          <el-dropdown-item command="dd"><a href="https://ifms.webuilding.net.cn/ifms" style="color:white;text-decoration:none">微瓴资产</a></el-dropdown-item>
          <el-dropdown-item command="cd"><a href="http://193.112.243.233:7070" style="color:white;text-decoration:none">微瓴视频</a></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="nav-midden">
        <span :class="{'iconfont':true,'icon-shitubaobiao':true,'activeclass':this.$store.state.threeD.isactive}" @click="changeActive(1)">&nbsp;&nbsp;&nbsp;视图报表</span>
        <span :class="{'iconfont':true,'icon-shebeijiance':true,'activeclass':this.$store.state.threeD.isactivetwo}" @click="changeActive(2)">&nbsp;&nbsp;&nbsp;设备监测</span>
    </div>
    <div class="nav-right">
      <div><div style="font-size:10px;position:relative;right:-10px;">{{name}}</div><div style="font-size:12px;">{{buildingname}}</div></div>
      <el-dropdown trigger="click" placement="top-end">
        <span class="el-dropdown-link"><img src="../../../assets/img/user.png"></span>
        <el-dropdown-menu slot="dropdown" class="userDropdown noTriangle">
          <el-dropdown-item>{{phone}}</el-dropdown-item>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logoutnow">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { getUsername, getPhone, getBuildingname } from '@/utils/auth'
// import { logout } from '@/api/user'
export default {
  name: 'navbar',
  data () {
    return {
      dropDownArrow: true,
      name: getUsername(),
      phone: getPhone(),
      buildingname: getBuildingname()
    }
  },
  created () {
    // this.$store.dispatch('GetTips')
    // this.$store.dispatch('GetUserInfo')
  },
  methods: {
    changeActive (routertype) {
      if (routertype === 1) {
        this.$router.push({ path: '/home' })
        For3D_View_Report_Clicked()
        WebMouseClickEvent("eventClick_000");
        this.$store.state.threeD.energycla = 0;
        this.$store.state.threeD.isactive = true;
        this.$store.state.threeD.isactivetwo =false;
      }else{
        this.$router.push({ path: '/homeEquip' })
        this.$store.state.threeD.energyclaone = 0;
        this.$store.state.threeD.isactive = false;
        this.$store.state.threeD.isactivetwo =true;
      }
    },
    handleCommand (command) {
      // window.location.href = command
    },
    dropDownChange (bool) {
      // this.dropDownArrow = !bool
    },
    logoutnow () {
      this.$store.dispatch('Logout').then(() => {
        console.log('yes')
        location.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar{
  width: 100%;
  margin: 0 auto;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .nav-left{
    height: 50px;
    display: flex;
    align-items: center;
    .logo{
      margin-right: 30px;
    }
    .el-dropdown-link{
      line-height: 50px;
      color: #fff;
      cursor: pointer;
    }
  }
  .nav-midden{
    height: 50px;
    position: relative;
    top: -70px;
      span{
          font-size: 15px;
          margin-right: 20px;
          cursor: pointer;
      }
      // span:hover{
      //   color: #16cdff;
      // }
      .activeclass{
          color: #16cdff;
      }
  }
  .nav-right{
    // background: #006fff;
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-badge{
      margin: 0px 12px;
      position: relative;
      top: -25px;
    }
    i{
      font-size: 24px;
      cursor: pointer;
    }
    img{
      width: 50px;
      height: 50px;
      padding: 8px 16px 8px 0px;
      vertical-align: middle;
      cursor: pointer;
    }
  }
}
ul.sysDropdown.el-popper{
  background: #262626;
  border: none;
  border-radius: 0px;
  margin: 0px;
  padding: 0px;
  li{
    color: #fff;
  }
  li:hover{
    color: #fff;
    background: #006fff;
  }
}
ul.userDropdown.el-popper{
  width: 220px;
  background: #262626;
  border: none;
  border-radius: 0px;
  margin: 0px 0px 0px 3px;
  padding: 0px;
  box-shadow: none;
  li{
    text-align: center;
    color: #999;
    border-bottom: 1px solid #3e3e3e;
    p{
      margin: 0px;
      font-size: 14px;
      line-height: 18px;
    }
  }
  li:hover{
    color: #006fff;
    background: #262626;
  }
}
</style>
